﻿@page
@model IndexModel
@{
    ViewData["Title"] = "首页 - 统一支付收款码系统";
}

<div class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4">统一支付收款码系统</h1>
                <p class="lead">将微信和支付宝收款码合成为一个二维码，提升您的收款效率</p>
                <div class="mt-4">
                    <a href="/UnifiedPayment" class="btn btn-primary btn-lg">立即生成统一收款码</a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="tech-visualization">
                    <div class="qr-placeholder">
                        <div class="qr-grid"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="features-section">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2>核心功能</h2>
                <p class="text-muted">为您的业务提供更智能的支付解决方案</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card h-100 feature-card">
                    <div class="card-body text-center">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-qr-code" viewBox="0 0 16 16">
                                <path d="M2 2h2v2H2V2Z"/>
                                <path d="M6 0v6H0V0h6ZM5 1H1v4h4V1ZM4 12H2v2h2v-2Z"/>
                                <path d="M6 10v6H0v-6h6Zm-5 1v4h4v-4H1Zm11-9h2v2h-2V2Z"/>
                                <path d="M10 0v6h6V0h-6Zm5 1v4h-4V1h4ZM8 1V0h1v2H8v2H7V1h1Zm0 5V4h1v2H8ZM6 8V7h1V6h1v2h1V7h5v1h-4v1H7V8H6Zm0 0v1H2V8H1v1H0V7h3v1h3Zm10 1h-1V7h1v2Zm-1 0h-1v2h2v-1h-1V9Zm-4 0h2v1h-1v1h-1V9Zm2 3v-1h-1v1h-1v1H9v1h3v-2h1Zm0 0h3v1h-2v1h-1v-2Zm-4-1v1h1v-2H7v1h2Z"/>
                                <path d="M7 12h1v3h4v1H7v-4Zm9 2v2h-3v-1h2v-1h1Z"/>
                            </svg>
                        </div>
                        <h5 class="card-title">双渠道支付</h5>
                        <p class="card-text">同时支持微信和支付宝支付，无需切换收款码</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 feature-card">
                    <div class="card-body text-center">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-phone" viewBox="0 0 16 16">
                                <path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
                                <path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                            </svg>
                        </div>
                        <h5 class="card-title">智能识别</h5>
                        <p class="card-text">自动识别用户设备类型，无缝跳转至相应支付方式</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 feature-card">
                    <div class="card-body text-center">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-lightning-charge" viewBox="0 0 16 16">
                                <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09zM4.157 8.5L4 9.117V9.5h4.43l.96-.944L4.157 8.5z"/>
                            </svg>
                        </div>
                        <h5 class="card-title">高效便捷</h5>
                        <p class="card-text">一次生成，多处使用，显著提高收款效率</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="how-it-works-section">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2>工作原理</h2>
                <p class="text-muted">简单三步，完成统一收款码生成</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 text-center">
                <div class="step-number">1</div>
                <h5>输入支付链接</h5>
                <p>分别输入您的微信和支付宝收款链接</p>
            </div>
            <div class="col-md-4 text-center">
                <div class="step-number">2</div>
                <h5>生成统一码</h5>
                <p>系统自动生成融合两种支付方式的二维码</p>
            </div>
            <div class="col-md-4 text-center">
                <div class="step-number">3</div>
                <h5>开始收款</h5>
                <p>用户扫码后自动识别并跳转到对应支付平台</p>
            </div>
        </div>
    </div>
</div>

<style>
    .hero-section {
        padding: 5rem 0;
        background: linear-gradient(135deg, rgba(15, 17, 26, 0.9), rgba(9, 11, 16, 0.95)), 
                    radial-gradient(circle at 10% 20%, rgba(0, 195, 255, 0.1) 0%, transparent 20%),
                    radial-gradient(circle at 90% 80%, rgba(108, 92, 231, 0.1) 0%, transparent 20%);
        margin-bottom: 3rem;
        border-radius: 0 0 20px 20px;
    }
    
    .tech-visualization {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
    }
    
    .qr-placeholder {
        width: 200px;
        height: 200px;
        border: 2px dashed var(--primary-color);
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
    }
    
    .qr-grid {
        width: 80%;
        height: 80%;
        background: 
            linear-gradient(rgba(0, 195, 255, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 195, 255, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
        animation: gridMove 10s linear infinite;
    }
    
    @@keyframes gridMove {
        0% { background-position: 0 0; }
        100% { background-position: 100px 100px; }
    }
    
    .features-section {
        padding: 4rem 0;
        margin-bottom: 3rem;
    }
    
    .feature-card {
        transition: all 0.3s ease;
        border: 1px solid var(--border-color);
    }
    
    .feature-card:hover {
        transform: translateY(-10px);
        border-color: var(--primary-color);
    }
    
    .feature-icon {
        color: var(--primary-color);
        margin-bottom: 1.5rem;
    }
    
    .how-it-works-section {
        padding: 4rem 0;
        background: var(--card-bg);
        border-radius: 20px;
        margin-bottom: 3rem;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 1.5rem;
        margin: 0 auto 1.5rem;
    }
    
    .brand-text {
        font-family: 'Orbitron', sans-serif;
        font-weight: 700;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: 1px;
    }
    
    .lead {
        color: var(--text-secondary);
        font-size: 1.25rem;
        font-weight: 300;
    }
</style>